<template>
    <el-dialog title="备案信息" width="75%" :visible.sync="showFlag" @close="back()" top="10vh">
        <el-row>
            <el-col :span="17">
                <el-form :model="record" style="border-right: 1px solid black;">
                    <el-row>
                        <el-col :span="23" :offset="1" align="left">
                            <el-form-item label="企业名称" label-width="100px">
                                {{ record.companyChineseName }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="23" :offset="1">
                            <el-form-item label="英文名称" label-width="100px">
                                {{ record.companyEnglishName != '' ? record.companyEnglishName : '无' }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8" :offset="1">
                            <el-form-item label="组织机构代码" label-width="100px">
                                {{ record.companyInstCode }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="3">
                            <el-form-item label="邮政编码" label-width="100px">
                                {{ record.companyPostcode }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8" :offset="1">
                            <el-form-item label="所属地区" label-width="100px">
                                {{ record.companyLocation }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="3">
                            <el-form-item label="所属行业" label-width="100px">
                                {{ record.companyIndustry }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :offset="1" :span="23">
                            <el-form-item label="企业性质" label-width="100px">
                                {{ record.companyNature }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :offset="1" :span="23">
                            <el-form-item label="主要经营业务" label-width="100px">
                                {{ record.companyBusiness }}
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="8" :offset="1">
                            <el-form-item label="联系人" label-width="100px">
                                {{ record.companyContacts }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="3">
                            <el-form-item label="联系电话" label-width="100px">
                                {{ record.companyPhone }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :offset="1" :span="23">
                            <el-form-item label="联系地址" label-width="100px">
                                {{ record.companyAddress }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8" :offset="1">
                            <el-form-item label="传真" label-width="100px">
                                {{ record.companyFax }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="3">
                            <el-form-item label="Email" label-width="100px">
                                {{ record.companyEmail }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="7">
                <div class="dialogDiv2">
                    <el-timeline>
                        <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                            :type="activity.type" :color="activity.color" size="large">
                            <p class="timeline-name">{{ activity.name }}</p>
                            <p class="timeline-content" v-if="activity.idea != ''">
                                <span>退回备注: </span><span class="timeline-content__idea">{{ activity.idea }}</span>
                            </p>
                            <p class="timeline-content">{{ activity.timestamp }}</p>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script>
import { getSingleRecord } from '@/api/province/recordExamine'

export default {
    name: "recordDetailInfo",
    data() {
        return {
            record: {},
            activities: [],
            showFlag: true
        }
    },
    props: {
        userId: {
            type: Number,
            required: true
        }
    },
    created() {
        getSingleRecord({ userId: this.userId }).then(response => {
            this.record = response.data.recordDetailInfo
            let histories = response.data.recordExamineHistory
            histories.forEach(history => {
                var historyType = history.historyType
                this.activities.push({
                    name: historyType == 0 ? "企业提交备案信息" : historyType == 3 ? "省审核退回" : "省审核通过",
                    idea: history.historyComment,
                    color: historyType == 0 ? "#4E97FF" : historyType == 3 ? "#dd0000" : "#00dd00",
                    timestamp: history.historyDate,
                })

            })
        })
    },
    methods: {
        back() {
            this.showFlag = false
            this.$emit("update-parameter")
        }
    }
}
</script>
<style>
.dialogDiv2{
    max-height: 560px;
    /* background-color: magenta; */
    display: block;
    overflow-y: scroll;
}
.dialogDiv2::-webkit-scrollbar {display:none}
</style>